<template>
  <div class="video-detail">
    <div class="video-header">
      <div class="video-title">
        <div class="title">{{ videoInfoDetail?.videoInfo?.videoName }}</div>
        <div class="video-info">
          <div class="iconfont icon-play2">{{ videoInfoDetail?.videoInfo?.playCount }}</div>
          <div class="iconfont icon-danmu">{{ videoInfoDetail?.videoInfo?.damnuCount }}</div>
          <div class="iconfont">{{ videoInfoDetail?.videoInfo?.createTime }}</div>
        </div>
      </div>
      <div class="video-user-info">
        <Avatar :user-id="userInfo?.userId" :avatar="userInfo?.avatar" />
        <div class="user-info">
          <router-link class="nick-name" :to="`/user/${userInfo?.userId}`" target="_blank">{{
            userInfo?.nickName
          }}</router-link>
          <div class="introduction">
            {{ userInfo?.personIntroduction || '这个人没有填写简介啊~~' }}
          </div>
          <div class="op-btns">
            <router-link class="btn-go-home" :to="`/user/${userInfo?.userId}`" target="_blank"
              >访问主页</router-link
            >
            <div class="focus-btn">
              <el-dropdown v-if="userInfo?.haveFocus">
                <el-button type="info" class="btn" :style="{ width: '100%' }">
                  <span class="iconfont icon-list"></span>
                  已关注
                  {{ userInfo.fansCount }}
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="focusUser(-1)">取消关注</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <el-button type="primary" class="btn" @click="focusUser(1)" v-else>
                关注 {{ userInfo?.fansCount }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="video-body">
      <div class="video-left">
        <div class="video-panel" :style="{ position: wideScreen ? 'absolute' : 'static' }">
          <Player ref="playerRef" @changeWideScreen="changeWideScreenHandler"></Player>
        </div>
        <div
          :style="{
            'margin-top': wideScreen ? playerHeight + 56 + 'px' : '0px'
          }"
        >
          <VideoAction></VideoAction>
          <VideoSummary
            v-if="videoInfoDetail?.videoInfo && Object.keys(videoInfoDetail?.videoInfo).length > 0"
          ></VideoSummary>
          <VideoComment
            v-if="videoInfoDetail?.videoInfo && Object.keys(videoInfoDetail?.videoInfo).length > 0"
          ></VideoComment>
        </div>
      </div>
      <div
        class="video-right"
        :style="{
          'margin-top': wideScreen ? playerHeight + 70 + 'px' : '0px'
        }"
      >
        <VideoDanMu></VideoDanMu>
        <VideoPList></VideoPList>
        <VideoRecommend
          v-if="videoInfoDetail?.videoInfo && Object.keys(videoInfoDetail?.videoInfo).length > 0"
        ></VideoRecommend>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Player from '@/components/Player.vue'
import type { VideoInfo } from '@/services/api/home'
import {
  cancelFocusUserHttpRequest,
  focusUserHttpRequest,
  userInfoHttpRequest,
  type UserInfoVO
} from '@/services/api/uHome'
import { videoDetailHttpRequest, type VideoDetailResultVO } from '@/services/api/video'
import { useHomeStore } from '@/stores/home'
import { useNavActionStore } from '@/stores/navAcrionStore'
import { nextTick, onMounted, provide, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import VideoPList from './VideoPList.vue'
import VideoDanMu from './VideoDanMu.vue'
import VideoAction from './VideoAction.vue'
import VideoSummary from './VideoSummary.vue'
import VideoComment from './VideoComment.vue'
import VideoRecommend from './VideoRecommend.vue'

const route = useRoute()
const router = useRouter()
const navAcrionStore = useNavActionStore()
const homeStore = useHomeStore()

const playerRef = ref()
const playerHeight = ref(0)
const videoInfoDetail = ref<VideoDetailResultVO | null>(null)
const userInfo = ref<UserInfoVO | null>(null)
//获取用户信息
const getUserInfo = async (userId: string) => {
  const res = await userInfoHttpRequest(userId)
  userInfo.value = res.data
}
//获取视频详情信息
const getVideoInfo = async () => {
  const res = await videoDetailHttpRequest(route.params.videoId)
  console.log(res, '视频详情数据')

  const resultVideoInfoData = res.data
  let introduction = resultVideoInfoData.videoInfo.introduction || ''
  introduction = introduction.replace(/\r\n/g, '<br>')
  introduction = introduction.replace(/\n/g, '<br>')
  resultVideoInfoData.videoInfo.introduction = introduction
  //简介标签 以逗号分割
  const tags = resultVideoInfoData.videoInfo.tags
    ? resultVideoInfoData.videoInfo.tags.split(',')
    : []
  resultVideoInfoData.videoInfo.tags = tags as unknown as string

  getUserInfo(resultVideoInfoData.videoInfo.userId)
  videoInfoDetail.value = resultVideoInfoData
}
getVideoInfo()
provide('videoInfo', videoInfoDetail)
onMounted(() => {
  nextTick(() => {
    navAcrionStore.setShowHeader(false)
    navAcrionStore.setFixedHeader(true)
    navAcrionStore.setFixedCategory(false)
    navAcrionStore.setShowCategory(false)
    navAcrionStore.setFoceFixedHeader(true)
  })
})

//关注和取消关注事件
const focusUser = async (count: number) => {
  if (Object.keys(homeStore.userInfo!).length == 0) {
    homeStore.setLogin(true)
    return
  }
  //关注和取消关注请求
  const res =
    count == 1
      ? await focusUserHttpRequest(userInfo.value?.userId as string)
      : await cancelFocusUserHttpRequest(userInfo.value?.userId as string)
  if (count == 1) {
    userInfo.value!.haveFocus = true
    userInfo.value!.fansCount++
  } else {
    userInfo.value!.haveFocus = false
    userInfo.value!.fansCount--
  }
}

const wideScreen = ref(false)
//播放器触发的事件方法
const changeWideScreenHandler = (res: any) => {
  wideScreen.value = res
}

provide('playerHeight', (height: any) => {
  playerHeight.value = height
})
</script>

<style lang="less" scoped>
.video-detail {
  margin-top: 64px;
  min-height: calc(100vh-64px);
  .video-header {
    padding-top: 20px;
    display: flex;
    .video-title {
      flex: 1;
      .title {
        font-size: 22px;
      }
      .video-info {
        margin-top: 10px;
        display: flex;
        color: #9499a0;
        .iconfont {
          margin-right: 20px;
          font-size: 14px;
          &::before {
            font-size: 18px;
            margin-right: 3px;
          }
        }
      }
    }
    .video-user-info {
      margin-left: 20px;
      width: 410px;
      display: flex;
      align-items: center;
      .user-info {
        flex: 1;
        margin-left: 10px;
        .nick-name {
          font-size: 14px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          color: var(--text);
          text-decoration: none;
        }
        .introduction {
          color: var(--text2);
          font-size: 12px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          margin: 3px 0px;
        }
        .op-btns {
          display: flex;
          .btn-go-home {
            margin-right: 10px;
            text-decoration: none;
            color: #fb7299;
            border: 1px solid #fb7299;
            line-height: 28px;
            border-radius: 5px;
            padding: 0px 20px;
            &:hover {
              background: #ffecf1;
            }
          }
          .focus-btn {
            flex: 1;
            width: 230px;
            .el-dropdown {
              width: 100%;
            }
            .btn {
              width: 100%;
              .iconfont {
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
  }
  .video-body {
    margin-top: 20px;
    position: relative;
    display: flex;
    .video-left {
      flex: 1;
    }
    .video-panel {
      position: static;
      width: 100%;
    }
    .video-right {
      margin-left: 30px;
      width: 410px;
      padding-bottom: 20px;
    }
  }
}
</style>
